<template>
  <div class="login">
    <h4>登录界面</h4>
    <el-form
        label-width="80px"
        :model="loginData"
    >
      <el-form-item label="账号 ">
        <el-input v-model="loginData.name"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input show-password v-model="loginData.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="subFun()" class="el-button">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {reactive} from 'vue'
import {ElMessage} from 'element-plus'
import {login, getData} from '../http/api'

export default {
  name: 'login',
  setup() {

    let loginData = reactive({
      name: '',
      password: ''
    })


    let subFun = () => {
      if (!loginData.name && !loginData.password) {
        ElMessage.error("账号或者密码有误！")
      }
      getData.then(resp => {
        console.log('=====', resp)
      })
      // console.log(JSON.parse(JSON.stringify(loginData)))
      login(JSON.parse(JSON.stringify(loginData))).then(res => {
        console.log('---------', res)
      })

    }
    return {
      loginData,
      subFun
    }
  }
}
</script>
<style scoped>
.login {
  width: 500px;
  margin: 150px auto;
  border: 1px solid #efefef;
  border-radius: 10px;
  padding: 20px;
}

h4 {
  text-align: center;
}

.el-button {
  width: 100%;
}
</style>

<!--import {getData} from './http/api.js'-->

<!--export default {-->
<!--name: 'App',-->
<!--components: {},-->
<!--setup() {-->
<!--getData.then(res => {-->
<!--console.log(res)-->
<!--})-->
<!--}-->
<!--}-->

